<template>
  <div class="behavior-container">
    <van-nav-bar
    v-isteacher
    title="操行"
    right-text="添加"
    right-arrow
    fixed
    @click-right="$router.push('/behavior/add')"
    />
    <van-nav-bar
    v-isstudent
      title="操行"
      fixed
    />
    <van-list  v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-empty v-if="list.length===0" description="没有数据">
      <van-button round type="primary" v-isteacher @click="$router.push('/behavior/add')" class="bottom-button">添加</van-button>
    </van-empty>
      <div class="card" v-for="item in list" :key="item" :title="item.name">
        <div>
          <label>操行类型: </label>{{ item.type }}
        </div>
        <div>
          <label>操行规则: </label>{{ item.rule }}
        </div>
        <div>
          <label>操行分数: </label><span :class="{red: item.score<0}">{{ item.score }}</span>
        </div>
        <div>
          <label>操行时间: </label>{{ item.startData }}
        </div>
        <div>
          <label>操行内容: </label>{{ item.content }}
        </div>
        </div>
    </van-list>
  </div>
</template>

<style scoped>
.behavior-container {
  padding-top: 50px;
}
  .bottom-button {
    width: 160px;
    height: 40px;
  }
.card {
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}
.red {
  color: red;
}
</style>
<script setup>
import { ref } from 'vue';

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad =  () => {

  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push({
        id: list.value.length + 1,
        name: '小花',
        type: '表扬',
        rule: '下楼梯',
        score: Math.floor((Math.random() - 1) * 3),
        content: '考试100分',
        startData: '2021-06-01',
        status: '未审核'
      });
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 50) {
      finished.value = true;
    }
  }, 1000);
}
</script>